<template>
  <div class="login" :class="{ active: isOtherSide }">
    <!--登录说明 -->
    <div v-show="isOtherSide">
      <login-desc title="登录说明" data="富文本内容" @on-return="handleReturn"></login-desc>
    </div>
    <div v-show="!isOtherSide">
      <!--登录 -->
      <div class="login_continaner">
        <div class="login_continaner_logo">
          <img src="~@/assets/logo.png" />
        </div>
        <!--切换tab -->
        <Tabs v-model="value">
          <pane label="账号" name="1">
            <!--用户登录 -->
            <AccountLogin :data="layout.autoLogin"></AccountLogin>
          </pane>
          <pane label="手机号" name="2"></pane>
        </Tabs>
        <!-- 说明 -->
        <div class="info mt-5">
          <SvgIcon type="ask" />
          <span class="cursor" @click="handleReturn">登录说明</span>
        </div>
        <!-- 说明 -->
        <!-- 联合登录 -->
        <Union :data="layout.unionList" />
        <!-- 联合登录 -->
      </div>
    </div>
  </div>
</template>
<script>
import LoginDesc from "./LoginDesc";
import AccountLogin from "./AccountLogin";
import Tabs from "../tabs/main";
import pane from "../tabs/pane";
import Union from "../union";
import { unionMap } from "@datas/union";
export default {
  components: {
    LoginDesc,
    Tabs,
    pane,
    Union,
    AccountLogin
  },
  name: "Login",
  data() {
    return {
      isOtherSide: false,
      value: "1",
      layout: {},
      result: {
        unionLogin: "1-2-3", //联合登录（1：微信、2：QQ、3：今日校园）
        isEnableAutoLoginStrategy: 1, //是否开启自动登录
        autoLoginStrategy: 1, //自动登录策略（1:7天自动登录、2:30天自动登录）
        isEnablePhoneVali: 1 //是否开启手机验证码登录
      }
    };
  },
  methods: {
    //登录说明
    handleReturn() {
      this.isOtherSide = !this.isOtherSide;
    },
    transConfig(data) {
      if (JSON.stringify(data) === "{}") return {};
      const {
        unionLogin,
        isEnableAutoLoginStrategy,
        autoLoginStrategy,
        isEnablePhoneVali
      } = data;
      return {
        unionList: unionLogin
          ? unionLogin
              .split("-")
              .filter(it => it !== "")
              .map(i => unionMap.get(i))
          : false,
        autoLogin: isEnableAutoLoginStrategy
          ? autoLoginStrategy === 1
            ? "7天自动登录"
            : "30天自动登录"
          : false,
        isEnablePhoneLogin: isEnablePhoneVali ? true : false
      };
    }
  },
  mounted() {
    this.layout = this.transConfig(this.result);
  }
};
</script>
<style lang="stylus" scoped>
.login {
  width: 420px
  background: rgba(255, 255, 255, 1)
  border-radius: 8px
  padding: 20px 38px 25px
  box-sizing: border-box
  transition: 0.6s
  transform-style: preserve-3d
  overflow: hidden
  &_continaner {
    margin-top: 15px
    &_logo img {
      display: block
      max-height: 38px
      max-width: 100%
    }
  }
  .info {
    font-size: 14px
    color: #65798E
    text-align: center
    >span {
      margin-left: 3px
    }
  }
}
.login.active {
  transform: rotateY(180deg)
}
</style>
